<template>
  <div class="common-layout" v-if="list">
    <el-container>
      <el-header
        >{{ list.message.name }}<el-icon><Switch /></el-icon
        >{{ list.message.state }}<el-icon><Switch /></el-icon
        >{{ list.message.sex }}<el-icon><Switch /></el-icon
        >{{ list.message.phone }}<el-icon><Switch /></el-icon
        >{{ list.message.mailbox }}<el-icon><Switch /></el-icon
        >{{ list.message.metro }}</el-header
      >
      <el-container>
        <el-aside width="200px">
          <el-menu router>
            <template v-for="(item, index) in list.data" :key="item.name">
              <el-sub-menu :index="index" v-if="item.list">
                <template #title
                  ><el-icon><Star /></el-icon>{{ item.title }}</template
                >
                <el-menu-item
                  :index="item.path + '/' + y.id"
                  v-for="y in item.list"
                  :key="y.id"
                  >{{ y.name }}</el-menu-item
                >
                <!-- <el-menu-item :index="item.path">菜单四一</el-menu-item>
                    <el-menu-item :index="item.path">菜单四二</el-menu-item>
                    <el-menu-item :index="item.path">菜单四三</el-menu-item> -->
              </el-sub-menu>
              <el-menu-item v-else :index="item.path"
                ><el-icon><Star /></el-icon>{{ item.title }}</el-menu-item
              >
            </template>
          </el-menu>
        </el-aside>
        <el-container>
          <el-main>
            <router-view></router-view>
          </el-main>
          <!-- <el-footer>地板</el-footer> -->
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts">
import { Star, Switch } from "@element-plus/icons-vue";
import { myAPI } from "@/api/user";
import { defineComponent, onMounted, toRefs } from "vue";
// import { useRouter } from 'vue-router';

export default defineComponent({
  name: "mAin",
  components: { Star, Switch },
  data() {
    return {
      list: { message: { name: "王智慧" } },
    };
  },
  created() {
    this.getmyapi();
  },
  methods: {
    async getmyapi() {
      const { data: res } = await myAPI();
      // console.log(res)
      this.list = res;
      // console.log(this.list)
    },
  },
  // setup(){
  //   onMounted(()=>{
  //     getmyapi();
  //   })
  //   let list={}
  //  const getmyapi=()=>{
  //     myAPI().then((res)=>{
  //       list=res.data
  //       //  console.log(res.data)
  //     })
  //  }
  //   // console.log(myAPI)
  //   // const router = useRouter()
  //   // console.log(router.getRoutes());
  //   // const list=router.getRoutes().filter(v=>v.meta.isShow)

  //   // console.log(list);
  //   console.log(list)
  //   return {...toRefs(list)}
  // }
});
</script>
<style lang="scss" scoped>
.el-header {
  // height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
  background: #080815;
  text-align: center;
  min-width: 1200px;
}
.el-header .el-icon {
  margin: 0 10px;
}
.el-aside {
  min-height: calc(100vh - 60px);
}
.el-menu {
  min-height: 100%;
  border-right-color: #080815;
}
.el-menu-item.is-active {
  background: #080815;
  color: #fff;
}
.el-main{
  padding: 0;min-width: 1000px;
}
</style>
